<template>
  <div class="withdrawal-record">
    <div>
      <van-nav-bar
        title="Withdrawal Record"
        left-arrow
        @click-left="$router.back()"
      />
    </div>
    <div class="record-list">
      <van-pull-refresh
        v-model="refreshing"
        loading-text="loading……"
        pulling-text="Drop down to refresh"
        loosing-text="Free to refresh"
        success-text="Refresh the success"
        @refresh="onRefresh"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text=" "
          loading-text="loading……"
          @load="onLoad"
        >
          <div class="record-li" v-for="item in list" :key="item.id">
            <div class="itemTop">
              <div class="amount">-{{ item.amount | getmoney }}</div>
              <div class="status">
                <p v-if="item.state === 0 || item.state === -1">
                  <i class="iconfont icon-a-zu5960"></i>
                  <span>Conducting</span>
                </p>

                <p v-else-if="item.state === 1">
                  <i class="iconfont icon-a-lujing6244"></i>
                  <span>Succeed</span>
                </p>
                <p v-else>
                  <i class="iconfont icon-a-lujing6246"></i>
                  <span>Faild</span>
                </p>
              </div>
            </div>
            <div class="itemBot">
              <div class="bot-left">{{ item.no }}</div>
              <div class="bot-right">{{ item.created_at }}</div>
            </div>
            <div
              v-if="item.state === 2 || item.state === 3 || item.state === 4"
            >
              <van-divider />
              <p class="tipsInfo">
                {{ item.remark }}
              </p>
            </div>
            <div v-if="item.state === -1">
              <van-divider />
              <p class="cancel-btn">
                <!-- <span>You can cancel this withdrawal record ！</span> -->
                <button @click="cancelHandle(item)">Cancel</button>
              </p>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      page: 0,
      refreshing: false,
      limit: 10,
      list: [],
      show: false,
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  mounted() {},
  methods: {
    onLoad() {
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      this.getPetOrders();
    },
    onRefresh() {
      this.finished = false;
      this.page = 0;
      this.loading = true;
      this.refreshing = true;
      this.onLoad();
    },
    getPetOrders(is) {
      this.page++;
      this.$store
        .dispatch("orders", {
          type: "withdrawal",
          page: this.page,
          limit: this.limit,
        })
        .then((res) => {
          this.loading = false;
          if (res.length == 0) {
            this.finished = true;
          } else {
            res.forEach((element) => {
              this.list.push(element);
            });
          }
        });
    },
    cancelHandle(value) {
      this.$store
        .dispatch("withdrawalCancel", {
          order_id: value.id,
        })
        .then((res) => {
          Toast("Cancel the success");
          this.onRefresh();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.withdrawal-record {
  height: 100%;
}
.cancel-btn {
  font-size: 12px;
  text-align: right;
  // display: flex;
  // justify-content: space-between;
  // align-items: center;
  // span {
  //   color: #888888;
  // }
  button {
    padding: 5px;
    border-radius: 8px;
    border: none;
    background-color: #4a67f5;
    color: #fff;
  }
}
.record-list {
  padding: 13px 13px 60px 13px;
  .record-li {
    padding: 12px;
    background-color: #fff;
    border-radius: 10px;
    margin: 0 0 10px 0;
    .itemTop {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #333;
      font-size: 13px;
      .amount {
        font-size: 20px;
        color: #4a67f5;
      }
    }
    .icon-a-zu5960 {
      font-size: 13px;
      color: #4a67f5;
    }
    .icon-a-lujing6246 {
      color: #adb4c7;
    }
    .icon-a-lujing6244 {
      color: #28c953;
    }
    .itemBot {
      padding: 5px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #333;
      .bot-left {
        font-size: 15px;
      }
      .bot-right {
        font-size: 13px;
        color: #888888;
      }
    }
    .tipsInfo {
      font-size: 12px;
      color: #888888;
    }
    .status {
      span {
        margin: 0 0 0 5px;
      }
    }
  }
}
</style>